<template>
  <div>
    <!-- 7.订单列表和详情页使用骨架屏 -->
    <van-skeleton title avatar :row="3" :loading="loading1">
  <van-tabs v-model:active="active" color="red" sticky>
      <van-tab v-for="item in tabList" :title="item.text" :key="item">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
     <div v-for="value in orderList"
            :key="value.id">
            <router-link :to="'/aboutview/' + value.id">
          <van-cell-group>
            <van-cell title="2024-06-18  15:04:26">
              <template #right-icon>
                <span style="color: orange">{{ value.zt }}</span>
              </template>
            </van-cell>
          </van-cell-group>
          <van-card
            :num="value.num"
            :price="value.price"
            :title="value.title"
          >
            <!-- 9.订单列表图片使用懒加载 -->
            <template #thumb>
              <van-image
                width="80"
                height="80"
                lazy-load
                :src="value.img"
              /> 
              </template>
              <template #footer>
                <van-button size="mini">取消订单</van-button>
                <van-button size="mini">立即支付</van-button>
            </template>
          </van-card>
          </router-link>
        </div>
  </van-list>
</van-pull-refresh>

       
      </van-tab>
    </van-tabs>
</van-skeleton>
    <!-- 3.封装列表组件供切换tab时展示列表使用 -->
    
</div>
</template>
<script setup>
import { ref,onMounted, watch } from "vue";
import axios from 'axios'

const active = ref();
const tabList = [
  { text: "全部" },
  { text: "待付款" },
  { text: "待发货" },
  { text: "待收货" },
  { text: "已完成" },
  { text: "已取消" },
];

const list = ref([]);
const orderList = ref([])
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

axios.get('/getlist').then((res) => {
  // console.log(res);
  list.value = res.data.list.map(item=>{
    if(item.status == 1){
      item.zt = '待付款'
    }
    if(item.status == 2){
      item.zt = '待发货'
    }
    if(item.status == 3){
      item.zt = '待收货'
    }
    if(item.status == 4){
      item.zt = '已完成'
    }
    if(item.status == 5){
      item.zt = '已取消'
    }
    return item
  })
  orderList.value = list.value
})

const loading1 = ref(true);

    onMounted(() => {
      setInterval(()=>{
        loading1.value = false;
      },800)
      
    });

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    axios.get('/getlist').then((res) => {
  console.log(res);
  list.value = list.value.concat(res.data.list).map(item=>{
    if(item.status == 1){
      item.zt = '待付款'
    }
    if(item.status == 2){
      item.zt = '待发货'
    }
    if(item.status == 3){
      item.zt = '待收货'
    }
    if(item.status == 4){
      item.zt = '已完成'
    }
    if(item.status == 5){
      item.zt = '已取消'
    }
    return item
  })
  orderList.value = list.value.concat(list.value)
})
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
watch(active,(val) =>{
  if(val == 0){
   orderList.value = list.value
  }
  if(val=== 1){
    return orderList.value.filter(item=>{
      item.status === 1
    })
  }
})
</script>
<style scoped lang='scss'>
</style>